<template>
    <div>
        <div class="main-content container">
            <div class="banner">
                <div class="desc">
                    <h1>多平台快速开发的UI框架</h1>
                    <h2 class="desc-text">
                        Dyend App UI，是全面兼容nvue的uni-app生态框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水
                    </h2>
                    <div class="banner-img">
                        <img alt="Dyend App" src="/index/banner_1920x1080.png" />
                    </div>
                </div>
            </div>
            <div class="card-box components">
                <p class="card-title">四大利器，为您保驾护航</p>
                <ul class="row">
                    <li class="col-md-3 col-sm-12">
                        <div class="card-item">
                            <img src="/index/guide.png" />
                            <h3>指南</h3>
                            <p>涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川</p>
                        </div>
                    </li>
                    <li class="col-md-3 col-sm-12">
                        <div class="card-item">
                            <img src="/index/components.png" />
                            <h3>组件</h3>
                            <p>众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用</p>
                        </div>
                    </li>
                    <li class="col-md-3 col-sm-12">
                        <div class="card-item">
                            <img src="/index/js.png" />
                            <h3>工具库</h3>
                            <p>众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</p>
                        </div>
                    </li>
                    <li class="col-md-3 col-sm-12">
                        <div class="card-item">
                            <img src="/index/layout.png" />
                            <h3>布局</h3>
                            <p>收集众多的常用页面和布局，减少开发者的重复工作，让您专注逻辑，事半功倍</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="card-box support">
                <p class="card-title">一次编写，多端发布</p>
                <ul class="row">
                    <li class="col-md-3 col-sm-6 col-xs-6">
                        <div class="card-item">
                            <img src="/index/android.png" />
                            <h3>安卓</h3>
                            <span class="alias">Android</span>
                        </div>
                    </li>
                    <li class="col-md-3 col-sm-6 col-xs-6">
                        <div class="card-item">
                            <img src="/index/ios.png" />
                            <h3>Apple</h3>
                            <span class="alias">IOS</span>
                        </div>
                    </li>
                    <li class="col-md-3 col-sm-6 col-xs-6">
                        <div class="card-item">
                            <img src="/index/weixin.png" />
                            <h3>微信小程序</h3>
                            <span class="alias">Mini Program</span>
                        </div>
                    </li>
                    <li class="col-md-3 col-sm-6 col-xs-6">
                        <div class="card-item">
                            <img src="/index/h5.png" />
                            <h3>H5</h3>
                            <span class="alias">Mobile Web</span>
                        </div>
                    </li>
                </ul>
                <ul class="row">
                    <li class="col-md-3 col-sm-6 col-xs-6">
                        <div class="card-item">
                            <img src="/index/qq.png" />
                            <h3>QQ小程序</h3>
                            <span class="alias">QQ Miniprogram</span>
                        </div>
                    </li>
                    <li class="col-md-3 col-sm-6 col-xs-6">
                        <div class="card-item">
                            <img src="/index/baidu.png" />
                            <h3>百度小程序</h3>
                            <span class="alias">Smart Program</span>
                        </div>
                    </li>
                    <li class="col-md-3 col-sm-6 col-xs-6">
                        <div class="card-item">
                            <img src="/index/alipay.png" />
                            <h3>支付宝小程序</h3>
                            <span class="alias">Alipay MiniProgram</span>
                        </div>
                    </li>
                    <li class="col-md-3 col-sm-6 col-xs-6">
                        <div class="card-item">
                            <img src="/index/toutiao.png" />
                            <h3>头条小程序</h3>
                            <span class="alias">Toutiao MiniProgram</span>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="card-box friend-link">
                <p class="card-title">友情链接</p>
                <friend-link></friend-link>
            </div>
        </div>
        <div class="foot">
            Copyright {{ year }} Dyend App UI | <a target="_blank" href="http://beian.miit.gov.cn">粤ICP备19025822号</a>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            year: new Date().getFullYear(),
        }
    },
    created() {
        // this.$alert('Dyend App2.0正在做最后的完善工作，本文档用于体验浏览，目前<b>无法使用！</b> <br>源码包发布 npm 和 uni-app 插件市场还在紧急整理中。请大家再耐心等待。' +
        //     '<br><span style="background: #ffe6e6;padding: 5px">提示:<b>Dyend App1.0无法直接升级Dyend App2.0</b></span>', '提示', {
        //   confirmButtonText: '确定',
        //   dangerouslyUseHTMLString: true,
        //   type: 'warning'
        // })
        // this.$alert('深圳宝安区高薪招聘前端开发岗位，加入我们，和Dyend App UI核心研发团队一起工作和成长，快来看看吧！联系QQ：1416956117，查看岗位：http://zpurl.cn/Y3SzR', '高薪招聘前端开发', {
        // 	confirmButtonText: '确定',
        // 	callback: action => {
        // 		if(action == 'confirm') window.open("http://zpurl.cn/YnBDC");
        // 	}
        // });
    },
}
</script>

<style scoped>
ul,
ol {
    padding-left: 0;
}

.foot {
    padding: 30px 0;
    /* background-color: rgb(40, 44, 52); */
    color: #606266;
    text-align: center;
    font-size: 14px;
}

.foot a {
    color: #606266;
}

.banner {
    text-align: center;
    margin-top: 4rem;
}

.banner .desc h1 {
    font-weight: 700;
    color: #303133;
    font-size: 2rem;
}

.banner .desc-text {
    color: #606266;
    font-size: 1.1rem;
    border: none;
    line-height: 1.7;
}

li {
    list-style: none;
}

.card-box {
    text-align: center;
    margin-top: 3.5em;
}

.card-box .card-item {
    margin-bottom: 30px;
}

.card-box .card-title {
    color: #303133;
    font-size: 24px;
    margin-bottom: 50px;
}

.card-box li {
    padding: 0 20px;
    box-sizing: border-box;
}

.card-box.components div:hover {
    bottom: 6px;
    box-shadow: 0 6px 18px 0 rgba(232, 237, 250, 0.5);
}

.card-box.components div {
    border: 1px solid #eaeefb;
    border-radius: 5px;
    transition: bottom 0.4s;
    position: relative;
    bottom: 0;
}

.card-box img {
    width: 160px;
    margin: 40px auto 20px;
}

.card-box h3 {
    color: #606266;
    font-size: 18px;
}

.card-box p {
    font-size: 14px;
    color: #909399;
    padding: 0 25px;
    margin-bottom: 40px;
}

.card-box.support img {
    width: 100px;
    transform: scale(1);
    transition: all 0.4s;
    margin-bottom: 0;
}

.card-box.support h3 {
    margin-bottom: 5px;
}

.card-box.support .card-item span {
    color: #909399;
    font-size: 14px;
    color: #99a9bf;
}

.card-box.support img:hover {
    transform: scale(1.2);
}

@media (max-width: 992px) {
    .banner {
        margin-top: 2rem;
    }

    .banner .desc h1 {
        font-size: 24px;
    }

    .banner .desc-text {
        font-size: 15px;
    }

    .card-box .card-title {
        font-size: 20px;
        margin-bottom: 25px;
    }
}
</style>
